import React from 'react';
import { Chart, Tooltip, Geom, Legend, Axis, Label } from 'bizcharts';
import DataSet from '@antv/data-set';
import Slider from 'bizcharts-plugin-slider';
import autoHeight from '../autoHeight';
import styles from './index.less';

@autoHeight()
class TimelineChartFourMonth extends React.Component {
  render() {
    const {
      tickInterval,
      yMin = 0,
      title,
      height = 500,
      padding = [50, 40, 70, 45],
      titleMap = {
        y1: 'y1',
        y2: 'y2',
      },
      borderWidth = window.innerWidth / 900,
      data: sourceData,
    } = this.props;

    const data = Array.isArray(sourceData) ? sourceData : [{ x: 0, y1: 0, y2: 0 }];
    window.dataSource = data;
    data.sort((a, b) => a.x - b.x);

    let max;
    if (data[0] && data[0].y1 && data[0].y2) {
      max = Math.max(
        [...data].sort((a, b) => b.y1 - a.y1)[0].y1,
        [...data].sort((a, b) => b.y2 - a.y2)[0].y2
      );
    }

    let min;
    if (data[0] && data[0].y1 && data[0].y2) {
      min = Math.min(
        [...data].sort((a, b) => a.y1 - b.y1)[0].y1,
        [...data].sort((a, b) => a.y2 - b.y2)[0].y2
      );
    }

    const ds = new DataSet({
      state: {
        start: data[0].x,
        end: data[data.length - 1].x,
      },
    });

    const dv = ds.createView();
    dv.source(data)
      .transform({
        type: 'filter',
        callback: obj => {
          const date = obj.x;
          return date <= ds.state.end && date >= ds.state.start;
        },
      })
      .transform({
        type: 'map',
        callback(row) {
          const newRow = { ...row };
          newRow[titleMap.y1] = row.y1;
          newRow[titleMap.y2] = row.y2;
          return newRow;
        },
      })
      .transform({
        type: 'fold',
        fields: titleMap.y2 ? [titleMap.y1, titleMap.y2] : [titleMap.y1], // 展开字段集
        key: 'key', // key字段
        value: 'value', // value字段
      });
    // 此处修改了显示成  年月日  5天隔一次显示
    const timeScale = {
      type: 'cat',
      // tickInterval: tickInterval,
      // mask: 'HH:mm',
      mask: 'YYYY.MM.DD',
      // range: [0, 1],
    };

    const cols = {
      x: timeScale,
      value: {
        formatter(value) {
          return `${value}%`;
        },
      },
    };

    const SliderGen = () => (
      <Slider
        padding={[0, padding[1] + 40, 0, padding[3] + 40]}
        // padding={[0, padding[1] + 20, 0, padding[3]+ 0]}
        width="auto"
        height={26}
        xAxis="x"
        yAxis="y1"
        scales={{ x: timeScale }}
        data={data}
        start={ds.state.start}
        end={ds.state.end}
        backgroundChart={{ type: 'line' }}
        onChange={({ startValue, endValue }) => {
          ds.setState('start', startValue);
          ds.setState('end', endValue);
        }}
      />
    );
    const widthI = window.innerWidth / (7 * data.length);
    return (
      <div className={styles.timelineChart} style={{ height: height + 40 }}>
        <div>
          {title && <h4>{title}</h4>}
          <Chart height={height} padding={padding} data={dv} scale={cols} renderer="svg" forceFit>
            <Axis name="x" />
            <Tooltip />
            <Legend name="key" position="top" offsetY={-20} />
            <Geom
              type="interval"
              position="x*value"
              size={widthI}
              color={['key', ['#4e81bd', '#c1504c']]}
              adjust={[
                {
                  type: 'Dodge',
                  marginRatio: 1, // 数值范围为 0 至 1，用于调整分组中各个柱子的间距
                },
              ]}
            >
              <Label content="value" />
            </Geom>
          </Chart>
        </div>
      </div>
    );
  }
}

export default TimelineChartFourMonth;
